import 'package:flutter/material.dart';

void main() {
  runApp(const _MyApp());
}

class _MyApp extends StatelessWidget {
  const _MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter ListView",
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("ListView Demo"),
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        ),
        body: _ListViewCustom()
      ),
    );
  }
}

// ListView 默认创建
class _ListViewDefault extends StatelessWidget {
  const _ListViewDefault({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(10.0),
      children: const <Widget>[
        Text("A", style: TextStyle(fontSize: 40.0),),
        Text("B", style: TextStyle(fontSize: 40.0),),
        Text("C", style: TextStyle(fontSize: 40.0),),
        Text("D", style: TextStyle(fontSize: 40.0, color: Colors.green),),
        Text("D", style: TextStyle(fontSize: 40.0),),
        Text("E", style: TextStyle(fontSize: 40.0),),
        Text("F", style: TextStyle(fontSize: 40.0, color: Colors.red),),
        Text("G", style: TextStyle(fontSize: 40.0),),
        Text("H", style: TextStyle(fontSize: 40.0),),
        Text("I", style: TextStyle(fontSize: 40.0),),
        Text("J", style: TextStyle(fontSize: 40.0),),
        Text("K", style: TextStyle(fontSize: 40.0),),
        Text("L", style: TextStyle(fontSize: 40.0),),
      ],
    );
  }
}

// 采用 ListView.builder
class _ListViewBuilder extends StatelessWidget {
  const _ListViewBuilder({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.all(10.0),
      itemExtent: 30.0,
      // 懒加载, 不指定, 无线滚动
      itemCount: 5,
      itemBuilder: (context, position) {
        return const FlutterLogo(size: 10);
      },
    );
  }
}

// 采用 ListView.separated 分割
class _ListViewSeparated extends StatelessWidget {
  const _ListViewSeparated({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: 20,
      itemBuilder: (BuildContext context, int index) {
        return Text("index $index",
          style: const TextStyle(fontSize:  20.0)
        );
      },
      separatorBuilder: (BuildContext context, int index) {
        return const Align(
          alignment: Alignment.centerLeft,
          child: FlutterLogo()
        );
      },
    );
  }
}

// 自定义 ListView
// 包含:
// 1. NeverScrollableScrollPhysics 不滚动效果
// 2. BouncingScrollPhysics IOS 效果
// 3. ClampingScrollPhysics Android 效果
// 4. FixedExtentScrollPhysics 固定范围滚动
class _ListViewCustom extends StatelessWidget {
  _ListViewCustom({super.key});

  // 固定滑动
  FixedExtentScrollController fixedExtentScrollController =
      FixedExtentScrollController();

  final List<String> imgList = [
    'https://p0.meituan.net/deal/66516fcd8ae3975edd2f4b5f8a931ce925464.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
    'https://p1.meituan.net/deal/141205589b18b856b87543af52abc29e35813.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
    'https://p1.meituan.net/deal/bc4a2aa8ea099f18053ab1c3eac6b6ae409003.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
    'https://p0.meituan.net/deal/e4f7972d34b289a00ae2491c70359024128785.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
    'https://p1.meituan.net/deal/603250f870b1a380817b6e236f34d91e29643.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
    'https://p1.meituan.net/deal/dc61effc0eea3e9e7eb46ad6538406104138050.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
    'https://p1.meituan.net/deal/21cb8a9168c0cb1ef309f7b7a6127f3f29289.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
    'https://p1.meituan.net/deal/0edbee70060eb1db27b7db7853dedb8424600.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0',
    'https://p0.meituan.net/deal/0be8d6f4610dee0150b65f874192cabd47239.jpg.webp@180w_180h_1e_1c_1l_80q%7Cwatermark=0'
  ];

  @override
  Widget build(BuildContext context) {
    return ListWheelScrollView(
      controller: fixedExtentScrollController,
      physics: const FixedExtentScrollPhysics(),
      itemExtent: 150.0,
      children: imgList.map((img) {
        return Card(
          child: Row(
            children: [
              Image.network(
                img,
                width: 150.0,
              ),
              const Text(
                '文字介绍',
                style: TextStyle(fontSize: 20.0),
              )
            ],
          ),
        );
      }).toList(),
    );
  }
}


